<template>
    <div class="applyWrap">
        <el-form
            ref="elForm"
            :model="formData"
            size="small"
            label-width="100px"
        >
            <el-row>
                <el-col :span="11">
                    <el-form-item
                        label="开票单位名称"
                        prop="deptCode"
                        label-width="140px"
                    >
                        <SelectTreeCom
                            v-model="formData.deptCode"
                            ref="SelectTreeCom"
                            @initFinished="getList"
                        ></SelectTreeCom>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="发票号码" prop="fphm">
                        <el-input
                            v-model="formData.fphm"
                            placeholder="请输入发票号码"
                            clearable
                            maxlength="20"
                            :style="{ width: '100%' }"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="发票类型" prop="fplx">
                        <dict-select
                            v-model="formData.fplx"
                            :dict-code="DictCode.VMS_FPLX"
                            style="width: 100%"
                        ></dict-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item
                        label-width="140px"
                        label="开票日期"
                        prop="date1"
                    >
                        <el-date-picker
                            type="daterange"
                            v-model="date1"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            :style="{ width: '100%' }"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            range-separator="~"
                            clearable
                            @change='onClear'
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="发票代码" prop="fpdm">
                        <el-input
                            v-model="formData.fpdm"
                            placeholder="请输入发票代码"
                            maxlength="12"
                            clearable
                            :style="{ width: '100%' }"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="发票匹配状态">
                        <el-select v-model="formData.ppzt" placeholder="请选择" style="width:100%;">
                            <el-option
                                v-for="item in [
                                    {
                                        label: '完全匹配',
                                        value: '1',
                                    },
                                    {
                                        label: '部分匹配',
                                        value: '0',
                                    },
                                ]"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item
                        label="开具与匹配间隔时长"
                        prop="timeInterval"
                        label-width="140px"
                    >
                        <el-input
                            v-model="formData.timeInterval"
                            placeholder="请输入正整数"
                            clearable
                            maxlength="20"
                            @blur="cleanInput('timeInterval')"
                            :style="{ width: '100%' }"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="13">
                    <div style="float: right">
                        <el-button
                            type="primary"
                            @click="submitForm"
                            size="small"
                        >
                            查询
                        </el-button>
                        <el-button @click="resetForm" size="small">
                            重置
                        </el-button>
                        <el-button
                            size="small"
                            type="primary"
                            @click="exportFn"
                                            :disabled="pages.total <= 0"
                        >
                            导出
                        </el-button>
                    </div>
                </el-col>
            </el-row>
        <tableList
            border
            :heightMin="heightComp.h1"
            :keySet="keySet"
            :tableData="listDetails"
            :paginationShow="true"
            :pageNumber="pages.current"
            ref="table2"

            :pageSize="pages.size"
            :total="pages.total"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
            @rowClick='rowClick'
        >
        </tableList>
        <div>
            <p style="color:#606266;font-size:16px !important; padding-bottom: 6px;">发票项目明细：</p>
        </div>
        <tableList
            border
            :maxHeight="heightComp.h2"
            :keySet="keySet2"
            :tableData="listDetails2"
                        handlerFixed="right"
            :handlerShow="true"
        >
            <template #handler="{ row }">
                <div @click="look(row)" class="worldBlueBtn">查看</div>
            </template>
        </tableList>
        </el-form>

        <DifferenceDetailDialog v-model="differenceDialogShow" :isApply='3' :selectRow='selectRow'></DifferenceDetailDialog>

    </div>
</template>

<script>
import tableList from '@/components/tableList/index.vue'
import { DictCode } from '@/utils/DictConstant'
import SelectTreeCom from '@/components/selectTree/selectTreeCom.vue'
import { getProcessList } from '@/api/handInvoiceAdd.js'
import { getPage ,exportList} from '@/api/matchFlowSelect.js'
import DifferenceDetailDialog from '../invoiceMatchFlowApply/DifferenceDetailDialog.vue'
import { valitedLimitNumber } from '@/utils/validate.js'
import { currentMonthFirstDayAndLastDay, formaDate } from '@/utils/getTime.js'
import DictSelect from '@/views/invoiceTemplate/components/DictSelect/DictSelect.vue'

export default {
    name: 'invoiceMatchFlowSearch',

    computed: {
        DictCode() {
            return DictCode
        },
        heightComp(){
            return this.$store.state.viewHeight > 650 ? {h1: 450, h2: 300} : {h1: 310 ,h2: 150}
        }
    },

    data() {
        return {
            date1: ['', ''],
            formData: {
                deptCode: '',
                fplx: '01',
                ppzt: '1',

                fpdm: '',
                fphm: '',

                ppzt: '',
                timeInterval: '',
            },
            listDetails: [],
            list1SelectObj: {},
            listDetails2: [],
            keySet: [
                {
                    label: '开票单位',
                    englishName: 'kpdw',
                    width: '120',
                },
                {
                    label: '发票种类',
                    englishName: 'fplx',
                },
                {
                    label: '发票代码',
                    englishName: 'fpdm',
                    width: '250',
                },
                {
                    label: '发票号码',
                    englishName: 'fphm',
                    width: '120',
                },
                {
                    label: '开票日期',
                    englishName: 'kprq',
                    width: '200',
                },
                {
                    label: '匹配日期',
                    englishName: 'pprq',
                    width: '200',
                },
                 {
                    label: '受票方名称',
                    englishName: 'spfmc',
                    width: '200',
                },
                {
                    label: '受票方识别号',
                    englishName: 'spfsbh',
                    width: '200',
                },
                {
                    label: '受票方银行账号',
                    englishName: 'spfyhzh',
                    width: '200',
                },
                {
                    label: '受票方地址电话',
                    englishName: 'spfdzdh',
                    width: '200',
                },

                {
                    label: '开票备注',
                    englishName: 'kpbz',
                    width: '200',
                },
                {
                    label: '发票状态',
                    englishName: 'fpzt',
                    width: '200',
                },
                {
                    label: '发票匹配状态',
                    englishName: 'ppzt',
                    width: '200',
                },
                {
                    label: '收款人员名称',
                    englishName: 'skry',
                    width: '200',
                },
                {
                    label: '复核人员名称',
                    englishName: 'fhry',
                    width: '200',
                },
                {
                    label: '含税金额',
                    englishName: 'jshj',
                    width: '200',
                },
                {
                    label: '税额',
                    englishName: 'hjse',
                    width: '200',
                },





            ],
            keySet2: [
                {
                    label: '应税商品及劳务',
                    englishName: 'spmc',
                    width: '200',
                },
                {
                    label: '规格型号',
                    englishName: 'ggxh',
                },
                {
                    label: '计量单位',
                    englishName: 'jldw',
                    width: '250',
                },
                {
                    label: '数量',
                    englishName: 'gmsl',
                    width: '120',
                },
                {
                    label: '单价（不含税）',
                    englishName: 'dj',
                    width: '200',
                },
                {
                    label: '金额（不含税）',
                    englishName: 'je',
                    width: '200',
                },
                  {
                    label: '税率',
                    englishName: 'sl',
                    width: '200',
                },
                {
                    label: '税额',
                    englishName: 'se',
                    width: '200',
                },
                {
                    label: '匹配状态',
                    englishName: 'itemPpzt',
                    width: '200',
                },
              
            ],
            differenceDialogShow: false,
            pages: {
                current: 1,
                size: 10,
                total: 0,
            },
            selectRow:{},
        }
    },
    created() {
        this.getTime()
    },
    methods: {
        getTime() {
            let { firstDay, LastDay } = currentMonthFirstDayAndLastDay()

            this.date1[0] = formaDate(firstDay)
            this.date1[1] = formaDate(LastDay)
        },
        look(val) {
            this.selectRow = val;
            this.selectRow.oidid = this.list1SelectObj.oidid; // 
            this.selectRow.matid = this.list1SelectObj.matid; //;
            this.differenceDialogShow = true
        },
        onClear(val, b) {
            if (val === null) {
                this.date1 = ['', '']
            }
        },
        cleanInput(param) {
            let input = this.formData[param]
            // 移除所有非数字、小数点和负号
            let cleaned = input.replace(/[^0-9]/g, '')
            this.formData[param] = cleaned
        },
        rowClick(val) {
            this.list1SelectObj = this.listDetails[val.selfIndex];
            this.listDetails2 = this.listDetails[val.selfIndex].invoiceItemList
        },
        handleCurrentChange(val) {
            this.pages.current = 1
            this.getList()
        },
        handleSizeChange(val) {
            this.pages.current = 1
            this.pages.size = val
            this.getList()
        },
        submitForm() {

            this.getList()
        },
        resetForm(val) {
            this.formData =  {
                deptCode: '',
                fplx: '01',
                ppzt: '1',

                fpdm: '',
                fphm: '',

                ppzt: '',
                timeInterval: '',
            }
            this.getTime()
        },
        exportFn(val) {
                        exportList({
                pageNo: this.pages.current,
                pageSize: this.pages.size,

                deptCode: this.formData.deptCode,
                fplx: this.formData.fplx,
                pprqq: this.date1[0],
                pprqz: this.date1[1],

                fpdm: this.formData.fpdm,
                fphm: this.formData.fphm,
            }).then(data => {
                // this.$message.success(data|| message)
                // if (code == 200) {
                //     
                // }
            })
        },
        getList() {
            getPage({
                deptCode: this.formData.deptCode,
                fpdm: this.formData.fpdm,
                fphm: this.formData.fphm,
                fplx: this.formData.fplx,
                ppzt: this.formData.ppzt,
                timeInterval: this.formData.timeInterval,

                pageNo: this.pages.current,
                pageSize: this.pages.size,

                kprqq: this.date1[0],
                kprqz: this.date1[1],
            }).then(({ code, data }) => {
                if (code == 200) {
                    console.log(this.$refs)
                    this.$refs.table2.setSelectRow()
                    this.listDetails2 = []
                    this.list1SelectObj = {}

                    setTimeout(() => {
                        this.listDetails = data.records.map((item) => {
                            return {
                                ...item,
                            }
                        })
                        this.pages.current = data.current
                        this.pages.size = data.size
                        this.pages.total = data.total
                        // if(this.listDetails&& this.listDetails[0]){
                        //     this.$refs.table2.$refs.table.setCurrentRow(this.listDetails[0])

                        // }

                    })
                }
            })
        },
    },
    components: {
        tableList,
        SelectTreeCom,
        DictSelect,
        DifferenceDetailDialog,
    },
}
</script>

<style lang = "scss" scoped>
.applyWrap {
    box-sizing: border-box;
}
::v-deep .el-form-item {
    margin-bottom: 12px;
}

::v-deep .el-table__body tr.current-row > td {
    background-color: #fbec88 !important;
}
::v-deep .el-table__body tr.current-row > td.el-table__cell {
    background-color: #fbec88 !important;
}
</style>
